<template>
  <div class="bg-white rounded-lg shadow-md mb-6 overflow-hidden">
    <!-- 帖子头部 -->
    <div class="p-6">
      <div class="flex items-center">
        <UserAvatar :user="post.user" size="md" />
        
        <div class="ml-3">
          <div class="font-medium text-gray-900">
            <router-link :to="{ name: 'Profile', params: { id: post.user.id } }">
              {{ post.user.username }}
            </router-link>
          </div>
          <div class="text-sm text-gray-500">
            {{ formatDate(post.createdAt) }}
          </div>
        </div>
        
        <div class="ml-auto">
          <button v-if="isOwnPost" class="text-gray-400 hover:text-gray-600">
            <i class="fas fa-ellipsis-h"></i>
          </button>
        </div>
      </div>
      
      <!-- 帖子内容 -->
      <div class="mt-4">
        <p class="text-gray-800">{{ post.content }}</p>
      </div>
      
      <!-- 帖子图片 -->
      <div v-if="post.imageUrl" class="mt-4">
        <img 
          :src="post.imageUrl" 
          alt="Post image" 
          class="w-full h-auto rounded-lg object-cover"
          :style="{ maxHeight: '500px' }"
        >
      </div>
    </div>
    
    <!-- 帖子互动区 -->
    <div class="border-t border-gray-100">
      <div class="flex justify-between px-6 py-3 text-sm">
        <div class="flex items-center">
          <span class="text-gray-500">
            {{ post.likesCount }} 个赞
          </span>
        </div>
        <div class="flex items-center">
          <span class="text-gray-500">
            {{ post.commentsCount }} 条评论
          </span>
        </div>
      </div>
      
      <div class="flex border-t border-gray-100">
        <button
          class="flex-1 flex items-center justify-center py-2 text-gray-500 hover:bg-gray-50 transition"
          @click="toggleLike"
        >
          <i class="fas fa-heart" :class="{ 'text-red-500': isLiked }"></i>
          <span class="ml-2">点赞</span>
        </button>
        
        <button
          class="flex-1 flex items-center justify-center py-2 text-gray-500 hover:bg-gray-50 transition"
          @click="toggleCommentBox"
        >
          <i class="fas fa-comment"></i>
          <span class="ml-2">评论</span>
        </button>
      </div>
      
      <!-- 评论输入框 -->
      <div v-if="showCommentBox" class="p-4 border-t border-gray-100">
        <div class="flex space-x-3">
          <UserAvatar :user="currentUser" size="sm" />
          
          <div class="flex-1">
            <input
              v-model="commentText"
              type="text"
              placeholder="添加评论..."
              class="w-full border border-gray-300 rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
            
            <div class="flex justify-end mt-2">
              <button
                class="bg-blue-500 hover:bg-blue-600 text-white text-sm font-medium py-1 px-3 rounded-md transition duration-300"
                @click="addComment"
                :disabled="!commentText.trim()"
              >
                发布
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 评论列表 -->
      <div v-if="post.comments && post.comments.length > 0" class="p-4">
        <div v-for="comment in post.comments" :key="comment.id" class="mb-4">
          <div class="flex space-x-3">
            <UserAvatar :user="comment.user" size="sm" />
            
            <div class="flex-1">
              <div class="bg-gray-100 rounded-lg p-3">
                <div class="font-medium text-gray-900 text-sm">
                  {{ comment.user.username }}
                </div>
                <div class="text-gray-700 text-sm">
                  {{ comment.content }}
                </div>
              </div>
              <div class="text-xs text-gray-500 mt-1">
                {{ formatDate(comment.createdAt) }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, watch } from 'vue'
import { useAuthStore } from '@/store/modules/auth'
import UserAvatar from '@/components/user/UserAvatar.vue'
import { formatDistanceToNow } from 'date-fns'

export default {
  components: {
    UserAvatar
  },
  
  props: {
    post: {
      type: Object,
      required: true
    }
  },
  
  setup(props) {
    const authStore = useAuthStore()
    
    const currentUser = computed(() => authStore.currentUser)
    const isOwnPost = computed(() => currentUser.value?.id === props.post.user.id)
    const isLiked = computed(() => 
      props.post.likes?.some(like => like.userId === currentUser.value?.id)
    )
    
    const showCommentBox = ref(false)
    const commentText = ref('')
    
    const formatDate = (dateString) => {
      return formatDistanceToNow(new Date(dateString), { addSuffix: true })
    }
    
    const toggleLike = () => {
      // 触发父组件的like事件
      props.$emit('like', props.post.id)
    }
    
    const toggleCommentBox = () => {
      showCommentBox.value = !showCommentBox.value
    }
    
    const addComment = () => {
      if (!commentText.value.trim()) return
      
      // 触发父组件的comment事件
      props.$emit('comment', props.post.id, commentText.value)
      commentText.value = ''
      showCommentBox.value = false
    }
    
    return {
      currentUser,
      isOwnPost,
      isLiked,
      showCommentBox,
      commentText,
      formatDate,
      toggleLike,
      toggleCommentBox,
      addComment
    }
  }
}
</script>